<template>
<div align="center">
  <h1>添加笔记本消息</h1>
  <p>编号： <input type="text" v-model="add.id"></p>
  <p>名称： <input type="text" v-model="add.name"></p>
  <p>价格： <input type="text" v-model="add.price"></p>
  <p>数量： <input type="text" v-model="add.number"></p>
  <p>品牌： <select name="" id="" v-model="add.type">
    <option value="暗夜精灵">暗夜精灵</option>
    <option value="小新潮7000">小新潮7000</option>
    <option value="MacBook-Pro">MacBook-Pro</option>
  </select></p>
  <p>入库日期： <input type="text" v-model="add.date"></p>
  <p>库存： <input type="text" v-model="add.kucu"></p>
  <button @click="add1">添加</button>
  <br>
  <h1>笔记本展示</h1>
  <table border="1" cellspacing="0" >
    <tr>
      <td>序号</td>
      <td>编号</td>
      <td>名称</td>
      <td>价格</td>
      <td>数量</td>
      <td>类型</td>
      <td>入库日期</td>
      <td>库存</td>
      <td>小计</td>
      <td>删除</td>
      <td>选择 <input type="checkbox" v-model="show" @click="show1"></td>
    </tr>
    <tr v-for="(i,j) in shops">
      <td>{{j}}</td>
      <td>{{i.id}}</td>
      <td v-if="i.kucu<5" :style="{color:'red'}">{{i.name}}</td>
      <td v-else>{{i.name}}</td>
      <td>{{i.price}}</td>

      <td>
        <button @click="i.number--">-</button>
      {{i.number}}
        <button v-if="i.number==i.kucu" @click="alert1">+</button>
        <button v-else @click="i.number++">+</button>
      </td>
      <td>{{i.type}}</td>
      <td>{{i.date}}</td>
      <td>{{i.kucu}}</td>
      <td>{{i.price*i.number}}</td>
      <td><button @click="del(j)">删除</button></td>
      <td><input type="checkbox" v-model="i.is_show"></td>
    </tr>
    <tr>
      <td colspan="11" align="center">
        总价:{{money}} <button @click="del_show">删除选中</button> <button @click="all_del">全部情空</button>
      </td>
    </tr>
  </table>
</div>
</template>

<script>
export default {
name: "computer",
  data(){
    return{
      shops:[
        {id:"001",name:'暗夜精灵',price:5600,number:5,date:'2019-02-03',type:'戴尔',kucu:10,is_show:false},
        {id:"002",name:'小新潮7000',price:4500,number:7,date:'2019-02-24',type:'联想',kucu:9,is_show:false},
        {id:"003",name:'MacBook-Pro',price:27800,number:8,date:'2019-02-24',type:'苹果',kucu:10,is_show:false}
      ],
      show:false,
      add:{}
    }
  },
  methods:{
    del(j){
      this.shops.splice(j,1)
    },
    show1(){
      this.shops.forEach(res=>{
        if(this.show==true){
          res.is_show=false
        }else{
          res.is_show=true
        }
      })
    },
    del_show(){
      for(let i=0;i<this.shops.length;i++){
        if(this.shops[i].is_show==true){
          this.shops.splice(i,1)
          i--
        }
      }
    },
    all_del(){
      this.shops.splice(0)
    },
    alert1(){
      alert('库存不足')
    },
    add1(){
      this.shops.push(this.add)
      this.add={}
    }
  },
  computed:{
    money(){
      let num=0
      this.shops.forEach(res=>{
        if(res.is_show==true){
          num+=res.price*res.number
        }
      })
      return num
    },
  },
  mounted() {

  },
}
</script>

<style scoped>

</style>
